@include('Admin.public.head')
<style type="text/css">
  .am-btn-group am-btn-group-xs{
    text-align: center;
    margin-left: 18%;
  }
  #specs_btn{

    margin-top: 8px;
    border-radius: 10px;
    width: 74px;
    color: #5db95d;
  }
</style>
<body>
@include('Admin.public.menu')

<div class=" admin-content" id="app">
  {{csrf_token()}}
  <div class="daohang">

  </div>
  <div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
      <ul class="am-icon-flag on"> 栏目名称</ul>

      <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">文章列表</a></dl>

      <dl>
        <a type="button" href="{{url('/admin/goods/caseAdd')}}" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus"> 添加文章</a>
      </dl>
    </div>
    <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
      <ul>
        <li>
          <div class="am-btn-group am-btn-group-xs">
            <select class="am-input-sm" v-model="search.cid" onchange="two_tid(this.value)">
              <option value="">请选择一级分类</option>
              <option v-for="val in categoryList" :value="val.id">@{{ val.name }}</option>
            </select>
          </div>
        </li>

        <li>
          <div class="am-btn-group am-btn-group-xs">
            <select class="am-input-sm" v-model="search.status">
              <option value="0">上架/下架</option>
              <option value="1">上架</option>
              <option value="2">下架</option>
            </select>
          </div>
        </li>
        <li><input type="text" class="am-form-field am-input-sm am-input-xm" v-model="search.keyword" placeholder="关键词搜索" /></li>
        <li><button type="button" class="am-btn am-radius am-btn-xs am-btn-success" v-on:click="searchs()" style="margin-top: -1px;">搜索</button></li>
      </ul>
    </div>
    <form class="am-form am-g">
      <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
        <thead>
        <tr class="am-success">
          <th >文章ID</th>
          <th >所属分类</th>
          <th >文章名称</th>
          <th >封面图</th>
          <th >上架/下架 <i class="am-icon-check am-text-warning"></i> <i class="am-icon-close am-text-primary"></i></th>
          <th >添加时间</th>
          <th >修改日期</th>
          <th >操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="val,index in shopList">
          <td>@{{ val.id }}</td>
          <td>@{{ val.name }}</td>
          <td>@{{ val.case_name }}</td>
          <td><img :src="val.pic" width="50" alt=""></td>
          <td class="am-hide-sm-only">
            <i v-show="val.status == 1" class="am-icon-check am-text-warning"></i>
            <i v-show="val.status == 0" class="am-icon-close am-text-primary"></i>
          </td>
          <td class="am-hide-sm-only">@{{ val.created_at }}</td>
          <td class="am-hide-sm-only">@{{ val.updated_at }}</td>
          <td style="width: 8%;">
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <button type="button" title="编辑" class="am-btn am-btn-default am-btn-xs am-text-secondary" v-on:click="edit(val.id)"><span class="am-icon-pencil-square-o"></span></button>
                <button type="button" title="删除" class="am-btn am-btn-default am-btn-xs am-text-danger am-round" v-on:click="del(val.id,index)"><span class="am-icon-trash-o"></span></button>
                <br/>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <ul class="am-pagination am-fr">
        <div class="block">
          <el-pagination
                  background
                  :page-size="PagesData.per_page"
                  :current-page = "PagesData.current_page"
                  layout="total , prev, pager, next"
                  :total="PagesData.total"
                  @prev-click="changeClick"
                  @next-click="changeClick"
                  @current-change="changeClick">
            >
          </el-pagination>
        </div>
      </ul>
    </form>
    <script type="text/javascript">
      function two_tid(e)
      {
        //console.log(e);
        app.search.two_tid = '';
        $.post("/admin/classify/classify",{ '_token':'{{csrf_token()}}',class:'two_tid',cid:e },function (res) {
          console.log(res);
          if(res.code){
            $("#two_cid_li").show();
            app.categoryLists = res.data
          } else {
            $("#two_cid_li").hide();
            //layer.msg(res.data);
          }
        });

      }
    </script>
    <script>
      var app = new Vue({
        el:"#app",
        data: {
          shopList : [], //商品列表
          search:{
            cid:'', //商品一级分类
            two_tid:'',//商品二级分类
            status:'0', //上架下架
            keyword:'', //关键字
          },
          //商品分类
          categoryList :{},
          categoryLists :{},
          PagesData:[],//分页
        },
        //事件
        methods: {
          //选择当前页
		  
          changeClick:function(e){
			  var pages = window.sessionStorage.setItem("page", e);
            var rico = this
            $.get("/admin/goods/caseIndex",{'_token':'{{csrf_token()}}',class:'select',page:e},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },
          initialize:function (e) {
			  var oldpages = window.sessionStorage.getItem("page");
            $.post("/admin/goods/caseIndex",{'_token':'{{csrf_token()}}',class:'select',page:oldpages},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
            //商品分类
            $.post("/admin/goods/caseIndex",{'_token':'{{csrf_token()}}',class:'classify'},function (res) {
              if(res.code){
                app.categoryList = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },
          //搜索
          searchs:function (id) {
            $.post("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'select',keyword:app.search},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },
          //编辑
          edit:function (id) {
            window.location.href="/admin/goods/caseAdd?id="+id;
          },
          //删除
          del:function (id,index) {
            $.post("/admin/goods/caseIndex",{'_token':'{{csrf_token()}}',class:'delete',id:id},function (res) {
              if(res.code){
                app.shopList.splice(index,1)
              } else {
                layer.msg(res.data);
              }
            });
          },
          mode:function (id) {
            var show = $('#mode'+id).css('display');
            if (show == 'block'){
              show = 'none';
              $('#mode-id'+id).html('展开')
            } else {
              show = 'block';
              $('#mode-id'+id).html('收起')
            }
            $('#mode'+id).css('display',show);
          }
        },
        //自动执行
        mounted: function () {
          this.initialize();//分公司
        },
      })
    </script>
@include('Admin.public.foot')